<script setup>
import {
  Delete, More
} from '@element-plus/icons-vue'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref } from 'vue'

const optModule=ref('')
const optType=ref('')
const nickname=ref('')
const requestMethod=ref('')

//文章列表数据模型
const logs = ref()

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  logList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  logList()
}

import {logListService} from '@/api/log.js'
const logList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    optModule: optModule.value ? optModule.value : null,
    optType: optType.value ? optType.value : null,
    nickname: nickname.value ? nickname.value : null,
    requestMethod: requestMethod.value ? requestMethod.value : null
  }
  let result = await logListService(params);
  //渲染视图
  total.value = result.data.total;
  logs.value = result.data.items;
  console.log(logs.value)
}
logList()

import '@vueup/vue-quill/dist/vue-quill.snow.css'
//控制抽屉是否显示
const visibleDrawer = ref()
//定义抽屉标题显示
const title = ref('')

//展示抽屉
const showDialog = (row) => {
  visibleDrawer.value = true;
  title.value = '日志详情';
  logModel.value.title = row.title;
  logModel.value.optModule = row.optModule;
  logModel.value.optUri = row.optUri;
  logModel.value.optType = row.optType;
  logModel.value.optMethod = row.optMethod;
  logModel.value.optDesc = row.optDesc;
  logModel.value.requestMethod = row.requestMethod;
  logModel.value.requestParam = row.requestParam;
  logModel.value.responseData = row.responseData;
  logModel.value.userId = row.userId;
  logModel.value.nickname = row.nickname;
  logModel.value.ipAddress = row.ipAddress;
  logModel.value.ipSource = row.ipSource;
  logModel.value.createTime = row.createTime;
  logModel.value.updateTime = row.updateTime;
}

//添加表单数据模型
const logModel = ref({
   id:'',
   optModule:'',
   optUri:'',
   optType:'',
   optMethod:'',
   optDesc:'',
   requestMethod:'',
   requestParam:'',
   responseData:'',
   userId:'',
   nickname:'',
   ipAddress:'',
   ipSource:'',
   createTime:'',
   updateTime:'',
})
const clearData = () => {
  logModel.value.id = '';
  logModel.value.optModule = '';
  logModel.value.optUri = '';
  logModel.value.optType = '';
  logModel.value.optMethod = '';
  logModel.value.optDesc = '';
  logModel.value.requestMethod = '';
  logModel.value.requestParam = '';
  logModel.value.responseData = '';
  logModel.value.userId = '';
  logModel.value.nickname = '';
  logModel.value.ipAddress = '';
  logModel.value.ipSource = '';
  logModel.value.createTime = '';
  logModel.value.updateTime = '';
};


</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>日志管理</span>
        <div class="extra">
          <!-- 搜索表单 -->
          <el-form inline>
            <el-form-item label="操作模块">
              <el-input v-model="optModule" placeholder="请输入操作模块" style="width: 130px"></el-input>
            </el-form-item>
            <el-form-item label="操作类型">
              <el-input v-model="optType" placeholder="请输入操作类型" style="width: 130px"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="nickname" placeholder="请输入用户名" style="width: 130px"></el-input>
            </el-form-item>
            <el-form-item label="请求方法">
              <el-select v-model="requestMethod" placeholder="请选择" style="width: 100px">
                <el-option label="GET" value="GET">GET</el-option>
                <el-option label="POST" value="POST">POST</el-option>
                <el-option label="PUT" value="PUT">PUT</el-option>
                <el-option label="DELETE" value="DELETE">DELETE</el-option>
                <el-option label="PATCH" value="PATCH">PATCH</el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="logList()">搜索</el-button>
              <el-button @click="optModule = ''; optType = '';requestMethod='';nickname='';logList()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    <el-table :data="logs" style="width: 100%">
      <el-table-column label="操作时间" prop="createTime" width="200"></el-table-column>
      <el-table-column label="操作模块" prop="optModule" width="auto"></el-table-column>
      <el-table-column label="请求地址" prop="optUri" width="150"></el-table-column>
      <el-table-column label="操作类型" prop="optType" width="100"></el-table-column>
      <el-table-column label="操作者" prop="nickname" width="100"></el-table-column>
      <el-table-column label="备注" prop="optDesc" width="auto"> </el-table-column>
      <el-table-column label="请求方法" prop="requestMethod" width="auto"></el-table-column>
      <el-table-column label="IP地址" prop="ipAddress" width="auto"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button size="small" :icon="More" circle plain type="primary" @click="showDialog(row)"></el-button>
          <el-button size="small" :icon="Delete" circle plain type="danger"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
      <!-- 添加文章表单 -->
      <el-form :model="logModel" label-width="100px">
        <el-form-item label="操作模块" style="margin: 10px 0">
          <el-input v-model="logModel.optModule"></el-input>
        </el-form-item>
        <el-form-item label="操作类型" style="margin: 10px 0">
          <el-input v-model="logModel.optType"></el-input>
        </el-form-item>
        <el-form-item label="操作方法" style="margin: 10px 0">
          <el-input v-model="logModel.optMethod"></el-input>
        </el-form-item>
        <el-form-item label="操作描述" style="margin: 10px 0">
          <el-input v-model="logModel.optDesc"></el-input>
        </el-form-item>
        <el-form-item label="请求方法" style="margin: 10px 0">
          <el-input v-model="logModel.requestMethod"></el-input>
        </el-form-item>
        <el-form-item label="请求参数" style="margin: 10px 0">
          <el-input v-model="logModel.requestParam"></el-input>
        </el-form-item>
        <el-form-item label="响应数据" style="margin: 10px 0">
          <el-input :rows="3" type="textarea" v-model="logModel.responseData"></el-input>
        </el-form-item>
        <el-form-item label="用户名" style="margin: 10px 0">
          <el-input v-model="logModel.nickname"></el-input>
        </el-form-item>
        <el-form-item label="IP地址" style="margin: 10px 0">
          <el-input v-model="logModel.ipAddress"></el-input>
        </el-form-item>
        <el-form-item label="IP来源" style="margin: 10px 0">
          <el-input v-model="logModel.ipSource"></el-input>
        </el-form-item>
        <el-form-item label="操作时间" style="margin: 10px 0">
          <el-input v-model="logModel.createTime"></el-input>
        </el-form-item>
        <el-form-item label="更新时间" style="margin: 10px 0">
          <el-input v-model="logModel.updateTime"></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* 抽屉样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
::v-deep .el-form-item{
  margin: 0 10px;
  font-size: 13px;
}
</style>